<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <label for="province">选择省份：</label>
    <select id="province" name="province">
        <option value="">请选择省份</option>
        <!-- <option value="hubei">湖北</option>
        <option value="henan">河南</option>
        <option value="hunan">湖南</option> -->
        <!-- 更多省份 -->
    </select>

    <label for="city">选择城市：</label>
    <select id="city" name="city">
        <option value="">请选择城市</option>
        <!-- 城市选项将根据省份动态添加 -->
    </select>
</body>
<script>
    // 省份和城市的数据
    const provinceCityMap = {
        '湖北': ['武汉', '宜昌', '荆州'],
        '河南': ['郑州', '洛阳', '开封'],
        '湖南': ['长沙', '株洲', '湘潭']
        // 更多省份和城市
    };

    // 获取省份和城市的下拉列表元素
    const provinceSelect = document.getElementById('province');
    const citySelect = document.getElementById('city');

    // 初始化省份和城市下拉列表
    function initializeProvinceCity() {
        // 为省份下拉列表添加选项
        Object.keys(provinceCityMap).forEach(province => {
            const provinceOption = document.createElement('option');
            provinceOption.value = province;
            provinceOption.textContent = province;
            provinceSelect.appendChild(provinceOption);
        });

        // 默认选择第一个省份，并更新城市下拉列表
        provinceSelect.addEventListener('change', updateCitySelect);
        // 如果省份下拉列表已经有值，则更新城市下拉列表
        if (provinceSelect.value) {
            updateCitySelect();
        }
    }

    // 更新城市下拉列表的函数
    function updateCitySelect() {
        // 清除现有的城市选项
        citySelect.innerHTML = '<option value="">请选择城市</option>';

        // 获取选中的省份值
        const selectedProvince = provinceSelect.value;

        // 如果省份在provinceCityMap中有对应的城市数据
        if (provinceCityMap[selectedProvince]) {
            // 为每个城市创建一个选项并添加到城市下拉列表中
            provinceCityMap[selectedProvince].forEach(city => {
                const cityOption = document.createElement('option');
                cityOption.value = city;
                cityOption.textContent = city;
                citySelect.appendChild(cityOption);
            });
        }
    }

    // 页面加载完成后初始化省份和城市下拉列表
    document.addEventListener('DOMContentLoaded', initializeProvinceCity);
</script>

</html>